<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>编辑房间</title>
	<#include "/common/resource.ftl">
	<script type="text/javascript">
		$(function () {
			<#if (params.id)??>
				$.ajaxRequest({
					url: '${params.contextPath}/web/room/query',
					data: {id: "${params.id}"},
					success: function (data) {
						if (!data.success) {
							$.message(data.message);
							return;
						}
						var record = data.data;
						for (var key in record) {
							$("[name='" + key + "']").val(record[key]);
						}

						var bedList = record.bedList, strs = "";
						for (var i = 0; i < bedList.length; i ++) {
						    var item = bedList[i];
						    item.index = i;
                            var str = '<div class="layui-form-item">' +
                                '<label class="layui-form-label">床位号</label>' +
                                '<div class="layui-input-inline">' +
                                '<input type="text" name="bedList[{index}].num" value="{num}" placeholder="请输入床位间号" class="layui-input">' +
                                '<input type="hidden" name="bedList[{index}].roomId" value="{roomId}">' +
                                '<input class="bed-elder-id" type="hidden" name="bedList[{index}].elderId" value="{elderId}">' +
                                '<input type="hidden" name="bedList[{index}].exists" value="1">' +
                                '</div>' +
                                '<div class="layui-form-mid layui-word-aux bed-remove"><i class="layui-icon">&#xe640;</i></div>' +
                                '</div>';
                            str = str.format(item);
                            strs += str;
                        }
                        $('[name="maxBedNum"]').val(bedList.length);
                        $(".bed-list").html(strs);
					}
				});
			</#if>

            $("#add-bed-button").click(function () {
                var maxBedNum = parseInt($('[name="maxBedNum"]').val());
                maxBedNum ++;
                $('[name="maxBedNum"]').val(maxBedNum);

                var str = '<div class="layui-form-item">' +
                    '<label class="layui-form-label">床位号</label>' +
                    '<div class="layui-input-inline">' +
                    '<input type="text" name="bedList[{0}].num" placeholder="请输入床位间号" class="layui-input">' +
                    '<input type="hidden" name="bedList[{0}].roomId">' +
                    '<input class="bed-elder-id" type="hidden" name="bedList[{0}].elderId">' +
                    '<input type="hidden" name="bedList[{0}].exists" value="1">' +
                    '</div>' +
                    '<div class="layui-form-mid layui-word-aux bed-remove"><i class="layui-icon">&#xe640;</i></div>' +
                    '</div>';
                str = str.format(maxBedNum);
                $(".bed-list").append(str);
            });

            $(".bed-list").on("click", ".bed-remove", function () {
                var val = $(this).parent().find(".bed-elder-id").val();
                if (val && val != "-") {
                    $.message("该床位已有老人入住，无法删除！");
                    return;
                }
                $(this).parent().remove();
            });
		});
	</script>
    <style>
        .layui-word-aux{border:1px solid #FF5722;width:35px;height:18px;border-radius:50%;cursor:pointer;color:#FF5722 !important;text-align:center;}
    </style>
</head>
<body style="background:#eee;">
	<div style="padding:10px;">
		<form class="layui-form ajax-form" action="${params.contextPath}/web/room/<#if (params.id)??>modify<#else>save</#if>" method="post">
			<input type="hidden" name="id" value="${params.id!}" />
            <div class="layui-row layui-col-space10">
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">房间信息</div>
                        <div class="layui-card-body">
                            <div class="layui-form-item">
                                <label class="layui-form-label">楼层<span class="ui-request">*</span></label>
                                <div class="layui-input-block">
                                    <select name="floorNum" class="layui-input {required:true}">
                                        <option value="">请选择</option>
                                        <option value="1">1楼</option>
                                        <option value="2">2楼</option>
                                        <option value="3">3楼</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">房间号<span class="ui-request">*</span></label>
                                <div class="layui-input-block">
                                    <input type="text" name="roomNum" placeholder="请输入房间号" class="layui-input {required:true}"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">类型<span class="ui-request">*</span></label>
                                <div class="layui-input-block">
                                    <select name="type" class="layui-input {required:true}">
                                        <option value="">请选择</option>
                                        <option value="1">单人间</option>
                                        <option value="2">双人间</option>
                                        <option value="3">三人间</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <input type="submit" value="保存" class="layui-btn" />
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">床位信息
                            <button type="button" id="add-bed-button" class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius" style="float:right;display:inline-block;margin-top:8px;">
                                <i class="layui-icon">&#xe608;</i> 添加床位
                            </button>
                            <input type="hidden" name="maxBedNum" value="0">
                            <input type="hidden" name="removeBedIds" value="">
                        </div>
                        <div class="layui-card-body bed-list">
                            <#--end-->
                        </div>
                    </div>
                </div>
            </div>

		</form>
	</div>
</body>

</html>
